<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="请选择时间">
        <el-date-picker
          v-model="searchObj.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd"
          default-time="00:00:00"
        />
      </el-form-item>

      <!-- <el-form-item label="请选择要查询近多少年的数据"> -->
        <!-- 一级分类 -->
        <!-- <el-select v-model="searchObj.year" placeholder="选择年限">
          <el-option v-for="year in yearList" :key="year.id" :label="year.id" :value="year.id"/>
        </el-select>
      </el-form-item> -->

      
      <el-button type="primary" icon="el-icon-search" @click="getUser()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

      <div class="chart-container">
        <!--echarts的容器-->
        <div id="main" style="width: 100%; height: 520px; background: #fff"></div>
      </div>
    </el-form>
  </div>
</template>
<!-- 在这里写js代码 -->
<script>
import teacher from "@/api/teacher";
import user from "@/api/user";
import scenery from "@/api/scenery";
import echarts from "echarts";
export default {
  data() {
    return {
      current: 1, //页码
      limit: 10, //每页多少行
      scneeryQuery: {}, //查询条件
      list: [], //列表数据
      total: 1, //总记录数
      charts: "",
      opinionData: ["155", "400", "900", "800", "300", "900", "270"], //数据
      timeList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], //x坐标的名称//近七天的日期
      searchObj: {},
      yearList: [
        {
          id: 1,
          name: "1"
        },
        {
          id: 2,
          name: "2"
        },
        {
          id: 3,
          name: "3"
        },
        {
          id: 4,
          name: "4"
        }
      ]
    };
  },
  created() {
    //获取七天注册的用户
    this.getUser();
    this.sleepOneSecond();
  },
  methods: {
    sleepOneSecond() {
      // 使用setTimeout函数延迟执行
      setTimeout(() => {
        // 这里是你想要在睡眠一秒后执行的代码
        this.$nextTick(function() {
          this.drawLine("main");
        });
        console.log("睡眠结束，一秒已过！");
      }, 300); // 1000毫秒等于一秒
    },
    getUser() {
      this.sleepOneSecond();
      console.log(this.searchObj);
      user.getSeventUser(this.searchObj).then(response => {
        if (response.code === 20000) {
          console.log(response.data.timeList);
          this.opinionData = response.data.dateList;
          this.timeList = response.data.timeList;
          console.log(this.opinionData);
          console.log(this.timeList);
        }
      });
    },
    drawLine(id) {
      console.log("-------------------------------------");
      console.log(this.opinionData);
      console.log(this.timeList);
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%"
          // text: "最近一周用户注册数量" //标题文本，支持使用 \n 换行。
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },

        toolbox: {
          feature: {
            saveAsImage: {} //保存为图片
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true //保证刻度线和标签对齐
          },
          data: this.timeList //x坐标的名称//近七天的日期
        },
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4, //纵坐标数
          interval: 250 //强制设置坐标轴分割间隔
        },

        series: [
          {
            type: "line", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)" //改变折线颜色
              }
            },
            data: this.opinionData
          }
        ]
      });
    },

    //current=1 Es6的新特性，这么写可以保证调用这个方法不传值，他会有一个默认值1
    //为什么会有传值进来，因为我们分页点击上一页或者下一页会调用我们这个方法
    getUserPageQuery(current = 1) {
      //current这个用我们调用这个方法传进来的值
      scenery
        .getSceneryPageVo(current, this.limit, this.scneeryQuery)
        .then(response => {
          console.log(response);
          this.list = response.data.sceneryList;
          this.total = response.data.total;
        });
    },
    //清空表单
    resetData() {
      this.scneeryQuery = {};
      this.getUserPageQuery(id);
    },
    //根据id删除
    removeDataById(id) {
      this.$confirm("此操作将永久删除该讲师, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          scenery.delSceneryById(id).then(response => {
            if (response.code === 20000) {
              //删除成功
              console.log("删除成功");
              //刷新页面
              this.getUserPageQuery();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              console.log("删除失败");
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //根据id查询酒店订单
    getOrderHotelInfo(id) {
      //路由跳转
      this.$router.push({ path: "/order/hotel/" + id });
    },
    //根据id查询景区订单
    getOrderSceneryInfo(id) {
      //路由跳转,带id
      this.$router.push({ path: "/order/scenery/" + id });
    },
    go2Detail(id) {
      this.$router.push({
        path: "/scenery/edit/" + id
      });
    },
    //数据回显
    updateDataById(id) {
      //路由跳转
      this.$router.push({ path: "/scenery/edit/" + id });
    }
  }
};
</script>

